<template>
  <!--顶部 搜索栏-->
  <div class="box-item search-box box-item-row">
    <div class="">
      <el-input
        v-model="searchData.name"
        style="width: 240px; margin-right: 10px"
        placeholder="输入角色名称..."
      />
      <el-select
        v-model="searchData.state"
        placeholder="选择状态"
        clearable
        size="large"
        style="width: 240px; margin-right: 10px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div>
      <el-button type="primary" @click="searchlist(1)">搜索</el-button>
      <el-button type="primary" @click="searchlist(2)">重置</el-button>
    </div>
  </div>
  <!--头部 工具栏 添加 批量删除等-->
  <div class="box-item tool-box box-item-row">
    <div style="margin-right: 10px">
      <el-button type="primary" @click="showAddModal">添加</el-button>
    </div>
  </div>
  <!--中部 内容栏 表格等-->
  <div class="box-item table-box">
    <el-table :data="tableData.data" border>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="角色名"> </el-table-column>
      <el-table-column prop="des" label="说明"> </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.state == 1 ? 'success' : 'danger'">{{
            scope.row.state == 1 ? "正常" : "禁用"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editAddModal(scope.$index)"
            >编辑</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="authRole(scope.$index, scope.row.id)"
            >授权</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!--底部 分页操作栏-->
  <div class="box-item page-box">
    <el-pagination
      v-model:current-page="tableData.current_page"
      v-model:page-size="tableData.per_page"
      :page-sizes="[10, 20, 30, 50, 100, 200, 300, 400]"
      :small="true"
      :disabled="false"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!--模态框 添加 编辑-->
  <div>
    <addModal
      ref="addDia"
      :list="chooseData"
      @useClose="addUseClose"
      @useConfirm="addUseConfirm"
    ></addModal>
  </div>
  <!--模态框 角色授权-->
  <div>
    <authRoleModal
      ref="authRoleDia"
      :list="roleRule"
      :ruleMenu="ruleMenu"
      @useClose="authUseClose"
      @useConfirm="authUseConfirm"
    ></authRoleModal>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, getCurrentInstance, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import addModal from "./add.vue"; //编辑添加页
import authRoleModal from "./auth.vue"; //角色授权页
const currentInstance = getCurrentInstance(); //获取main.js中挂载的实例
const { $api } = currentInstance.appContext.config.globalProperties;

//表格数据元素
const tableData = reactive({
  total: 0, //总数
  per_page: 10, //每页显示
  current_page: 1, //当前页
  last_page: 1, //最后一页的页码
  data: [], //数据列表
});
//搜索元素组
const searchData = reactive({
  name: "", //名称
  state: "", //状态
});
//编辑或删除或详情选中的数据
const chooseData = ref({
  id: 0,
  name: "", // 角色组名称
  des: "", // 角色组说明
});
const chooseIndex = ref(0); //选中的表格数据下标

const addDia = ref(null); //添加 和 编辑模态框 定义

const authRoleDia = ref(null); //权限授权模态框 定义
const ruleMenu = ref([]); //权限菜单列表
const roleRule = ref({ id: 0, rules: [] }); //选中角色的已选择的权限菜单
const options = [
  {
    value: 0,
    label: "禁用",
  },
  {
    value: 1,
    label: " 启用",
  },
];

onMounted(() => {
  getList();
  //权限菜单数组数据
  setTimeout(() => {
    getRuleArr();
  }, 1000); //延迟1s请求
});

//获取列表信息
const getList = () => {
  const params = {
    page: tableData.current_page,
    name: searchData.name,
    state: searchData.state,
    limit: tableData.per_page,
  };
  $api.get("v1/login/sys/role/list", params).then((res) => {
    if (res.code == 200) {
      // tableData = reactive(res.data);
      Object.assign(tableData, res.data);
      // console.log(res.data);
    }
  });
};
//改变每页显示的数量
const handleSizeChange = (val) => {
  tableData.per_page = val;
  getList();
};
//改变当前页码
const handleCurrentChange = (val) => {
  tableData.current_page = val;
  getList();
};
//搜索
const searchlist = (type) => {
  //重置搜索条件
  if (type == 2) {
    searchData.name = "";
    searchData.state = "";
  }
  getList();
};
//编辑数据
const editAddModal = (index) => {
  const item = tableData.data[index];
  if (item.state == 1) {
    item.state = true;
  } else {
    item.state = false;
  }
  chooseData.value = item;
  chooseIndex.value = index;
  nextTick(() => {
    showAddModal();
  });
};
//显示添加模态框
const showAddModal = () => {
  addDia.value.dialogVisble = true; //更改值
};
//关闭弹出框
const addUseClose = (e) => {
  chooseData.value = { id: 0, name: "", des: "" };
  // console.log(e, "关闭");
  // 二次确认删除
  //   ElMessageBox.confirm("确定要新增吗？", "提示", {
  //     type: "warning",
  //   })
  //     .then(() => {
  //       ElMessage.success("新增成功");
  //     })
  //     .catch(() => {});
};
//弹出框提交按钮
const addUseConfirm = (obj) => {
  chooseData.value = { id: 0, name: "", des: "" }; //重置选中值
  // console.log(obj);
  $api.post("v1/login/sys/role/add", obj).then((res) => {
    if (res.code == 200) {
      // console.log( obj, obj.id)
      if (obj.id > 0) {
        //编辑
        const item = tableData.data[chooseIndex.value];
        Object.assign(item, res.data);
        // tableData.data.splice(chooseIndex.value,1,item);
      } else {
        //添加
        tableData.data.unshift(res.data); //向数组第一个位置添加
        tableData.total++; //数量加1
      }
    }
    // handleLogin(res.data); //存储登录状态
  });
};

//获取权限菜单
const getRuleArr = () => {
  $api.get("v1/login/sys/rule/role_rule_arr", {}).then((res) => {
    if (res.code == 200) {
      // console.log(res.data);
      ruleMenu.value = res.data;
    }
  });
};

// 表格操作 - 显示 授权 模态框
const authRole = (index, id) => {
  const item = tableData.data[index];
  roleRule.value = {
    id: id,
    rules: item.rules
  };
  nextTick(() => {
    authRoleDia.value.rulesDialogVisble = true; //更改值
  });
};
//关闭弹出框
const authUseClose = (e) => {
  nextTick(() => {
    roleRule.value = { id: 0, rules: [] };
  });
};
//弹出框提交按钮
const authUseConfirm = (obj) => {
  nextTick(() => {
    roleRule.value = { id: 0, rules: [] };
  });
  // console.log(obj);
  $api.post("v1/login/sys/role/role_auth_add", obj).then((res) => {
    if (res.code == 200) {
      ElMessage.success(res.msg);
      getList();
    } else {
      ElMessage.error(res.msg);
    }
  });
};
</script>
<style></style>
